<template>
  <div>
    <div>
      <el-input
        placeholder="请输入文案"
        v-model="newValue"
        @input="handleChange"
        :class="desc.class"
        :style="desc.style"
        v-bind="attrs"
        v-on="desc.on"
      >
      </el-input>
      <p v-if="attrs.desc" class="desc">{{ attrs.desc }}</p>
    </div>
  </div>
</template>

<script>
import formMixin from 'vue-ele-form/lib/mixins/formMixin';
import { debounce } from '@/utils/utils';
import { mapGetters } from 'vuex';
export default {
    name: 'input-with-tips', // name 属性必须填写, 在使用时, 需要和这里定义的 name 一致
    mixins: [formMixin], // 必须引入mixin
    props: {
    // value 是传递过来的值
        value: String,
        // desc是此组件的描述, 结构为
        // { style: {}, class: {}, on: {}, attrs: {} }
        desc: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    computed: {
    },
    data () {
        return {
            // 用于v-model绑定, 因为 v-model无法绑定props值
            newValue: this.value
        };
    },
    methods: {
        handleChange: debounce(function () {
            this.$emit('input', this.newValue);
        }, 400),
        handleSelect (selectValue) {
            console.log(45341111, selectValue);
            this.$emit('change', selectValue);
        }
    }
};
</script>

<style scoped lang="scss">
.desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  text-transform: initial;
  word-wrap: break-word;
  word-break: break-word;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  clear: both;
  padding: 0 15px 0 0;
}
</style>
